<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <!-- <li>
            <div>
                <img src="" alt="">
            </div>
            <div>
                <p>xxx</p>
                <p>10.00</p>
            </div>
        </li> -->
    </ul>
    <script>
        const oUl=document.querySelector('ul');
        const data = [
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 10
            },
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 20
            },
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 30
            },
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 40
            },
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 50
            },
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 10
            },
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 10
            },
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 80
            },
            {
                link: 'xxx',
                src: 'xxx',
                title: 'aaaa',
                price: 10
            }

        ]
        //第一种
        // data.forEach((v) => {
        //     let oLi = document.createElement('li');
        //     oLi.innerHTML = `<a href="${v.link}">
        //             <div>
        //                 <img src="${v.src}" alt="">
        //             </div>
        //             <div>
        //                 <p>${v.title}</p>
        //                 <p>${v.price}</p>
        //             </div>
        //         </a>`;

        //     oUl.appendChild(oLi);
        // })
        //第二种
        let str='';
        data.forEach((v) => {
            str+=`<li>
                    <a href="${v.link}">
                        <div>
                            <img src="${v.src}" alt="">
                        </div>
                        <div>
                            <p>${v.title}</p>
                            <p>${v.price}</p>
                        </div>
                    </a>
            </li>`
        })
        oUl.innerHTML=str;
    </script>
</body>

</html>